<template>
  <div class="addCard-container">
    <!-- head return-->
    <van-nav-bar :title="$t('h.accPage.card.addCard.title')" style="background: #ededed">
      <template #left>
        <van-icon name="arrow-left" size="24" color="black" @click="escEditCard" />
      </template>
    </van-nav-bar>

    <div class="addCard-content">
      <div class="addCard-list">
        <form>
          <div class="card-type">
            <div class="input-title">
              <span>支付方式</span>
            </div>
            <div class="input-box">
              <span>信用卡</span>
            </div>
          </div>
          <div class="card-data">
            <div class="input-title">
              <span>输入信用卡信息</span>
              <span style="margin-left: 0.9em; color: red">{{ cardErrors }}</span>
            </div>
            <div class="card-input-box">
              <div class="card-number">
                <div class="card-number-input">
                  <input ref="cardNumInput" :data-error="cardErrors.cardNumber ? true : false" type="tel" class="form-control" placeholder="xxxx xxxx xxxx xxxx" v-model="cardNumber" v-cardformat:formatCardNumber />
                </div>
                <div class="card-logos">
                  <Icon ref="visa" iconClass="Visa" :className="visaClass"></Icon>
                  <Icon ref="master" iconClass="Master" :className="masterClass"></Icon>
                  <Icon ref="amex" iconClass="Amex" :className="amexClass"></Icon>
                </div>
              </div>
              <div class="card-date">
                <div class="card-years-input">
                  <input ref="cardExpInput" id="card-exp" :data-error="cardErrors.cardExpiry ? true : false" class="form-control" placeholder="09/2019" v-model="cardExpiry" maxlength="10" v-cardformat:formatCardExpiry />
                </div>
                <div class="card-security-number">
                  <input ref="cardCvcInput" :data-error="cardErrors.cardCvc ? true : false" class="form-control" placeholder="1234" v-model="cardCvc" v-cardformat:formatCardCVC />
                </div>
                <div class="security-number-logo">
                  <Icon iconClass="Card" className="card-icon"></Icon>
                </div>
              </div>
            </div>
          </div>
          <div class="card-holder">
            <div class="input-title">
              <span>持卡人姓名</span>
              <span style="margin-left: 0.9em; color: red">{{ holderError }}</span>
            </div>
            <div class="input-box">
              <input type="text" v-model="cardholder" />
            </div>
          </div>
          <div class="country-area">
            <div class="input-title">
              <span>国家和地区</span>
            </div>
            <div class="input-box">
              <span @click="show = true">{{ countryName }}</span>
            </div>
          </div>
          <van-button type="primary" block @click="submitCreditCard">同意并绑定银行卡</van-button>
        </form>
      </div>
    </div>
    <van-popup v-model="show" round position="bottom" :style="{ height: '45%' }">
      <van-picker show-toolbar :columns="country" :default-index="defIndex" @cancel="show = false" @confirm="enterCountry" />
      <input class="search" type="text" placeholder="关键字搜索" v-model="searchText" />
    </van-popup>
  </div>
</template>

<script>
import { mapState } from 'vuex'

export default {
  name: 'AddCard',
  data() {
    return {
      show: false,
      cardNumber: null, // 卡号
      cardExpiry: null, // 有效期
      cardCvc: null, // 安全码
      cardErrors: '', // 错误提示
      cardBrand: '', // 卡种
      cardholder: null, // 持卡人
      holderError: '', // 持卡人错误提示
      visaClass: 'visa-icon',
      masterClass: 'master-icon',
      amexClass: 'amex-icon',
      countryName: '中国',
      // 默认国家索引,搜索国家关键字
      defIndex: 36,
      searchText: ''
    }
  },
  computed: {
    ...mapState({
      countryList: state => state.account.countryList
    }),
    country() {
      var arr = this.countryList
      var list = []
      arr.forEach(item => {
        list.push(item.label)
      })
      return list
    }
  },
  watch: {
    // 银行卡号 每4位加 空格
    // cardNumber(newNum) {
    //   var num = newNum
    //     .replace(/\s/g, '')
    //     .replace(/[^\d]/g, '')
    //     .replace(/(\d{4})(?=\d)/g, '$1 ')
    //   this.cardNumber = num
    // },
    // 信用卡日期 每2位加 '/'
    // cardDate(newNum) {
    //   var num = newNum
    //     .replace(/\s/g, '')
    //     .replace(/[^\d]/g, '')
    //     .replace(/(\d{2})(?=\d)/g, '$1/')
    //   this.cardDate = num
    // },
    // 获取信用卡品牌
    cardBrand(val) {
      switch (val) {
        case 'visa':
          this.visaClass = 'visa-icon'
          this.masterClass = ('master-icon', 'master-def')
          this.amexClass = ('amex-icon', 'amex-def')
          break
        case 'mastercard':
          this.masterClass = 'master-icon'
          this.visaClass = ('visa-icon', 'visa-def')
          this.amexClass = ('amex-icon', 'amex-def')
          break
        case 'amex':
          this.amexClass = 'amex-icon'
          this.visaClass = ('visa-icon', 'visa-def')
          this.masterClass = ('master-icon', 'master-def')
          break
        default:
          this.visaClass = ('visa-icon', 'visa-def')
          this.masterClass = ('master-icon', 'master-def')
          this.amexClass = ('amex-icon', 'amex-def')
      }
      console.log(val)
    },
    // 关键字搜索策略
    searchText(val) {
      this.country.find((item, i) => {
        if (val !== '' && item.indexOf(val) !== -1) {
          this.defIndex = i
        }
      })
    }
  },
  methods: {
    // 退出信用卡添加
    escEditCard() {
      var query = this.$route.query
      if (query.source === 1) return this.$router.push({ name: 'payments' })
      this.$router.push({ name: 'cardlist' })
    },
    // 提交绑定信用卡验证
    submitCreditCard() {
      // init
      this.cardErrors = ''
      this.holderError = ''

      // 验证信用卡种
      var brand = this.cardBrand
      if (brand !== 'visa' && brand !== 'amex' && brand !== 'mastercard') return (this.cardErrors = 'This credit card is not supported.')
      // validate card number
      if (!this.$cardFormat.validateCardNumber(this.cardNumber)) return (this.cardErrors = 'Invalid Credit Card Number.')
      // validate card expiry
      if (!this.$cardFormat.validateCardExpiry(this.cardExpiry)) return (this.cardErrors = 'Invalid Expiration Date.')
      // validate card CVC
      if (!this.$cardFormat.validateCardCVC(this.cardCvc)) return (this.cardErrors = 'Invalid CVC.')
      // validate cardholder
      if (!this.cardholder) return (this.holderError = 'Invalid Cardholder')

      // 表单验证通过
      this.$load.start()
      setTimeout(() => {
        this.$load.done()
        this.$msg.success('暂未开通该功能')
      }, 300)
    },
    // 确认当前国家
    enterCountry(item) {
      this.show = false
      this.countryName = item
      this.searchText = ''
    }
  }
}
</script>

<style lang="less" scoped>
.addCard-container {
  position: absolute;
  width: 100%;
  height: 100%;
  max-width: 640px;
  background-color: #ededed;
}
.van-nav-bar {
  position: fixed;
  width: 100%;
  max-width: 640px;
  z-index: 3;
}
.addCard-content {
  position: relative;
  display: flex;
  justify-content: center;
  width: 100%;
  height: 100%;
  background-color: #ededed;
  .addCard-list {
    overflow: hidden;
    position: absolute;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    top: 46px;
    width: 97%;
    padding: 0.6em;
    border-radius: 9px;
    background: white;
    .card-type,
    .card-data,
    .card-holder,
    .country-area {
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      align-items: center;
      padding-top: 0.6em;
      width: 100%;
      height: 80px;
      .input-title {
        width: 100%;
        padding: 0 0.3em;
        font-size: 0.7em;
      }
      .input-box {
        display: flex;
        align-items: center;
        width: 100%;
        height: 60%;
        padding: 0 0.9em;
        border: 0.1em solid #b3b3b3;
        border-radius: 9px;
        span:nth-child(1) {
          color: #ffbf05;
        }
        input:nth-child(1) {
          width: 100%;
          height: 100%;
          border: none;
          color: #ffbf05;
        }
      }
    }
    .card-data {
      height: 114px;
      .card-input-box {
        position: relative;
        width: 100%;
        height: 75%;
        border: 0.1em solid #b3b3b3;
        border-radius: 9px;
        .card-number {
          display: flex;
          position: relative;
          width: 93%;
          height: 50%;
          left: 50%;
          transform: translateX(-50%);
          border-bottom: 0.1em solid #b3b3b3;
          .card-number-input {
            display: flex;
            align-items: center;
            width: 60%;
            height: 100%;
            input:nth-child(1) {
              width: 96%;
              height: 60%;
              border: none;
              color: #ffbf05;
            }
          }
          .card-logos {
            display: flex;
            justify-content: space-between;
            align-items: center;
            width: 40%;
            height: 100%;
            padding-left: 0.3em;
            padding-right: 0.3em;
            .visa-icon {
              font-size: 2.2em;
            }
            .visa-def {
              font-size: 2.2em;
              filter: grayscale(100%);
              opacity: 0.45;
            }
            .master-icon {
              font-size: 2.3em;
            }
            .master-def {
              font-size: 2.3em;
              filter: grayscale(100%);
              opacity: 0.45;
            }
            .amex-icon {
              font-size: 2.3em;
            }
            .amex-def {
              font-size: 2.3em;
              filter: grayscale(100%);
              opacity: 0.45;
            }
          }
        }
        .card-date {
          display: flex;
          align-items: center;
          position: relative;
          width: 93%;
          height: 50%;
          left: 50%;
          transform: translateX(-50%);
          .card-years-input {
            display: flex;
            align-items: center;
            width: 42.5%;
            height: 70%;
            border-right: 0.1em solid #b3b3b3;
            input:nth-child(1) {
              width: 93%;
              height: 60%;
              border: none;
              color: #ffbf05;
            }
          }
          .card-security-number {
            display: flex;
            align-items: center;
            justify-content: center;
            width: 42.5%;
            height: 70%;
            input:nth-child(1) {
              width: 90%;
              height: 60%;
              border: none;
              color: #ffbf05;
            }
          }
          .security-number-logo {
            width: 15%;
            height: 100%;
            text-align: center;
            line-height: 42.75px;
            .card-icon {
              font-size: 2.3em;
            }
          }
        }
      }
    }
    /deep/.van-button--primary {
      width: 100%;
      background: #ffbf05;
      border: #ffbf05;
      border-radius: 9px;
      font-size: 1.1em;
      margin-top: 1.5em;
      margin-bottom: 1.5em;
    }
  }
}
/deep/.van-popup {
  .van-picker__cancel {
    font-size: 1em;
  }
  .van-picker__confirm {
    font-size: 1em;
    color: #ffbf05;
  }
  .search {
    position: absolute;
    width: 200px;
    height: 27px;
    top: 0.6em;
    left: 50%;
    border: none;
    border-radius: 9px;
    background: #f5f5f5;
    transform: translateX(-50%);
    color: #a3a3a3;
    text-align: center;
  }
}
</style>
